<template>
    <div>
       <div class="hot-title">热门推荐</div>
      <ul>
        <router-link
          class="item"
          v-for="item in hot"
          tag="li"
          :to="'/detail/'+item.id"
          :key="item.id">
           <img class="item-img" :src="item.imgUrl" alt="">
          <div class="item-info">
            <p class="item-title">{{item.title}}</p>
            <p class="item-dec">{{item.desc}}</p>
            <button>查看详情</button>
          </div>
        </router-link>
      </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
      props:{
          hot:{
            type:Array,
            default:[]
          }
      }
    }
</script>

<style lang="stylus" scoped>
  @import "../common/stylus/minxies.styl"
  .hot-title
    height 40px
    line-height 40px
    font-size 15px
    padding-left 10px
  .item
    bottom-border-1px(#e4e4e4)
    display flex
    overflow hidden
    .item-img
      width 100px
      height 100px
      padding 10px
    .item-info
      flex 1
      .item-title
        line-height 40px
        font-size 16px
        overflow hidden;
        text-overflow ellipsis;
        white-space nowrap;
      .item-dec
        line-height 24px
        color #999
        padding-right 5px
      button
        border:none
        background #ff9300
        border-radius 4px
        padding 0 10px
        margin-top:2px
        line-height 25px
        color #fff
</style>
